<!--
 * @LastEditors: yuanweijiang
 * @LastEditTime: 2025-11-13 14:47:19
    * @Description: 验证码登录
-->
<template>
	<div class="auth">
		<!-- 手机号 -->
		<div class="auth-code">
			<el-input placeholder="请输入手机号" oninput="if(value.length>10)value=value.slice(0,11)" type="number" show-word-limit v-model="phoneCode">
				<template #prepend>
					<div class="phone-prepend">
						<div>中国+86</div>
					</div>
				</template>
			</el-input>
		</div>
		<!-- 验证码 -->
		<div class="auth-code auth-code-input2">
			<el-input
				placeholder="请输入短信验证码"
				class="auth-code-input"
				style="border: 1px"
				oninput="if(value.length>5)value=value.slice(0,6)"
				type="number"
				show-word-limit
				v-model="authCode"
			>
				<template #append>
					<div class="auth-code-getAuth">获取验证码</div>
				</template>
			</el-input>
		</div>
		<div class="auth-button">登录 / 注册</div>
		<span class="auth-text">未注册的手机号验证后进行注册</span>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 响应式数据
const phoneCode = ref('');
const authCode = ref('');
</script>

<style lang="scss" scoped>
.auth {
	.auth-button {
		width: 335px;
		height: 36px;
		background: #3156a5;
		border-radius: 4px 4px 4px 4px;
		text-align: center;
		line-height: 36px;
		margin-top: 44px;

		font-family: Source Han Sans CN, Source Han Sans CN;
		font-weight: 500;
		font-size: 18px;
		color: #ffffff;

		&:hover {
			background: #5276c3;
			cursor: pointer;
		}
	}

	.auth-text {
		float: right;
		margin-top: 31px;
		height: 16px;
		font-family: Source Han Sans CN, Source Han Sans CN;
		font-weight: 500;
		font-size: 14px;
		color: #a7adbc;
		line-height: 16px;
		text-align: right;
		font-style: normal;
		text-decoration-line: underline;
		text-transform: none;
	}

	.auth-code {
		margin-top: 15px;

		:deep(.el-input-group__prepend) {
			background-color: #fff;
			padding: 0 15px;
			border: 0px;
		}

		border-radius: 4px 4px 4px 4px;
		border: 1.5px solid #3156a5;

		.phone-prepend {
			font-weight: 500;
			font-size: 16px;
			color: #051025;
			height: 38px;
			display: flex;
			align-items: center;
		}

		.phone-lenght {
			width: 1px;
			height: 14px;
			background: #a9b9da;
			border-radius: 0px 0px 0px 0px;
			margin-left: 10px;
		}

		:deep(.el-input) {
			input {
				// border-left-width: 0px;
				// border: 1px 1px 1px 0px solid rgb(4, 4, 239);
				border: 0px;
				letter-spacing: 0.1em;
				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 500;
				font-size: 16px;
				color: #a7adbc;
				line-height: 19px;
				padding: 0 0px;
				color: #000;
			}

			::-webkit-inner-spin-button {
				-webkit-appearance: none;
				margin: 0;
			}
		}
	}

	.auth-code-input2 {
		:deep(.el-input-group__append) {
			border: 0px;
			padding: 0px;
			width: auto;

			.auth-code-getAuth {
				width: 120px;
				height: 40px;
				background: rgba(49, 86, 165, 0.1);
				border-left: 1px solid #3156a5;

				font-family: Source Han Sans CN, Source Han Sans CN;
				font-weight: 500;
				font-size: 16px;
				color: #3156a5;
				line-height: 40px;
				text-align: center;
				cursor: pointer;

				&:hover {
					background: rgba(49, 86, 165, 0.2);
				}
			}
		}
	}
}
</style>
